<template>
	<div id="firminfopublish">
		<Top></Top>
		<div class="top">
			<p>企业招聘信息发布</p>
		</div>
		<div class="wrap">
			<div class="write-info">
				<el-form :model="form" ref="form" label-width="130px">
					<el-form-item label="招聘职位" required>
						<el-input v-model="form.name" placeholder="请选择招聘职位"></el-input>
					</el-form-item>
					<el-form-item label="薪资" required>
						<el-input v-model="form.salary" placeholder="请输入薪资"></el-input>
					</el-form-item>
					<el-form-item label="招聘城市" required>
						<el-input v-model="form.city" placeholder="请选择招聘城市"></el-input>
					</el-form-item>
					<el-form-item label="工作经验" required>
						<!--<el-input v-model="form.exer" placeholder="请填写工作经验"></el-input>-->
						<el-select v-model="form.exer" placeholder="请选择工作经验" style="width: 100%;">
							<el-option label="在校应届生" value="在校应届生"></el-option>
							<el-option label="1年" value="1年"></el-option>
							<el-option label="2年" value="2年"></el-option>
							<el-option label="3-4年" value="3-4年"></el-option>
							<el-option label="5-7年" value="5-7年"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="学历" required>
						<el-input v-model="form.educ" placeholder="请填写学历要求"></el-input>
					</el-form-item>
					<el-form-item label="工作类型" required>
						<el-select v-model="form.type" placeholder="请选择工作类型" style="width: 100%;">
							<el-option label="全职" value="全职"></el-option>
							<el-option label="兼职" value="兼职"></el-option>
							<el-option label="实习" value="实习"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="招聘信息发布者" required>
						<!--<el-input v-model="form.publisher" placeholder="请选择招聘信息发布者"></el-input>-->
						<el-select v-model="form.publisher" placeholder="请选择工作类型" style="width: 100%;">
							<el-option label="hr" value="hr"></el-option>
							<el-option label="技术总监" value="技术总监"></el-option>
							<el-option label="经理" value="经理"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="工作时间" required class="select-work-time">
						<!--<el-input v-model="form.time" placeholder="请选择"></el-input>-->
						<el-date-picker type="date" placeholder="开始时间" v-model="form.timestart" style="width: 200px;"></el-date-picker>
						<span>至</span>
						<el-date-picker type="date" placeholder="结束时间" v-model="form.timeend" style="width: 200px;"></el-date-picker>
					</el-form-item>

					<el-form-item label="职业描述" required class="description" style="width: 100%;">
						<editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>
						<!--<el-input v-model="form.desc" placeholder="请输入职业描述"></el-input>-->
					</el-form-item>
					<el-form-item label="职位福利" required style="width: 100%;">
						<!--<el-input v-model="form.powell" placeholder="请输入公司福利"></el-input>-->
						<el-tag v-for="tag in tags" class="position-well" :key="tag.name" closable :type="tag.type">
							{{tag.name}}
						</el-tag>
					</el-form-item>
					<el-form-item align="center" class="opt-box" style="width: 100%;">
						<el-button type="primary" size="medium" @click="resetForm('form')">保存</el-button>
						<el-button type="primary" size="medium" @click="publishbtn">发布</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import Top from './top'
	import EditorBar from './plugins/wangEnduit'
	export default {
		components: {
			Top,
			EditorBar
		},
		data() {
			return {
				form: {
					name: '',
					salary: '',
					city: '',
					exer: '',
					educ: '',
					type: '',
					desc: '',
					publisher: '',
					timestart: '',
					timeend: '',
					powell: '',
				},
				detail: '',
				isClear: false,
				tags: [{
						name: '做五休二',
						type: ''
					},
					{
						name: '周末双休',
						type: 'success'
					},
					{
						name: '带薪休假',
						type: 'info'
					},
					{
						name: '五险一金',
						type: 'warning'
					},
					{
						name: '全勤奖',
						type: 'danger'
					},
					{
						name: '绩效奖金',
						type: 'success'
					}
				],
			}
		},
		methods: {
			publishbtn() {

			},
			resetForm(val) {
				console.log(this.$refs['form'])
				this.$refs[val].resetFields();
			},
			change() {

			}
		},
		mounted(){
			let showdata = this.$route.params.data;
			console.log(showdata)
		}
	}
</script>

<style>
	.opt-box .el-form-item__content {
		margin: 0 !important;
	}
	
	.select-work-time .el-form-item__content {
		/*border: 1px solid #000;*/
		display: flex;
		justify-content: space-between;
	}
</style>
<style scoped>
	#firminfopublish {
		background-color: #f1f1f1;
	}
	
	#firminfopublish .wrap {
		background-color: #fff;
	}
	
	.publish-title {
		height: 200px;
		text-align: center;
		line-height: 200px;
	}
	
	.publish-title span {
		padding: 20px 40px;
		border-radius: 20px;
		color: #fff;
		background-color: #666;
		cursor: pointer;
	}
	
	.publish-title span:hover {
		background-color: #333;
	}
	
	.top {
		background-color: rgba(0, 0, 0, .7);
		text-align: center;
		padding: 30px 0 70px;
	}
	
	.top p {
		font-size: 36px;
		color: #fff;
	}
	
	.write-info {
		/*padding-top: 50px;*/
		padding: 50px 30px 20px;
		overflow: hidden;
	}
	
	.write-info .el-form-item {
		float: left;
		width: 50%;
	}
	/*工作时间*/
	
	.select-work-time {
		/*border: 1px solid red ;*/
	}
	
	.select-work-time .el-form-item__content {
		border: 1px solid #000;
	}
	
	.select-work-time .el-input,
	.select-work-time span {
		float: left;
	}
	
	.opt-box {
		margin-top: 30px;
	}
	
	.description {
		margin-top: 30px;
	}
	.position-well{
		margin-right:15px;
	}
</style>